<template>
  <div class="infinite-list-wrapper">
    <div ref="cardDiv" v-loading="loading" v-infinite-scroll="load" :style="{overflow:'hidden'}">
      <div v-for="(item, index) in caseLIst" :key="index" @click="caseDetail(item)">
        <el-card class="caseCard" :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="item.resUrl" class="image" />
          <div style="padding: 14px;">
            <span>{{ dictsTurn(item.caseTypes,'/') }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.patients }}</time>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- <p v-if="loading">加载中...</p> -->
    <p v-if="noMore">没有更多了</p>
    <el-dialog class="caseDialog" :append-to-body="true" title="案例详情" :visible.sync="dialogVisible" width="800px">
      <b>{{ caseDetailObj.caseTypes?dictsTurn(caseDetailObj.caseTypes,'/'):'' }}</b>
      <div style="width：100%;"><img :src="caseDetailObj.resUrl" style="width：100%;" alt="" /></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import queryCaseList from '@/api/case';
export default {
  data() {
    return {
      loading: false,
      noMore: false,
      typeValue: '',
      caseLIst: [],
      size: 10,
      dialogVisible: false,
      caseDetailObj: {}
    };
  },
  dicts: ['case_type'],
  computed: {
    ...mapGetters(['searchInfo'])
  },
  watch: {
    searchInfo(newVal, oldVal) {
      this.size = 0;
      this.case = newVal.code;
      const value = this.case.split(':')[2];
      this.typeValue = value === 'all' ? '' : value;
      this.load();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.queryList({ page: 0, size: this.size, type: this.typeValue });
    });
  },
  methods: {
    queryList(params) {
      this.loading = true;
      queryCaseList(params)
        .then((res) => {
          this.caseLIst = res.content;
          this.count = res.totalElements;
          this.loading = false;
        })
        .catch((er) => {});
    },
    // 处理多个字典值翻译
    dictsTurn(key, ymbol) {
      const arr = key.split('/') || [];
      let str = '';
      arr.forEach((element, i) => {
        i === arr.length - 1 ? str += this.dict.case_type[Number(element)].label : str += this.dict.case_type[Number(element)].label + ymbol;
      });
      return str;
    },
    caseDetail(item) {
      this.caseDetailObj = item;
      this.dialogVisible = true;
    },
    load() {
      // 防止频繁请求数据
      if (this.size <= this.count) {
        this.size += 5;
        this.queryList({ page: 0, size: this.size, type: this.typeValue });
      } else {
        this.noMore = true;
      }
    }
  }
};
</script>

<style>
.caseDialog .el-dialog__body {
  padding: 32px 64px;
}
.caseDialog .el-dialog__body b {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
}
.caseDialog .el-dialog__body > div,
.caseDialog .el-dialog__body img {
  width: 100%;
}
.caseCard {
  width: 314px;
  float: left;
  margin-right: 20px;
  margin-bottom: 40px;
  cursor: pointer;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.caseCard .image {
  width: 100%;
  height: 214px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
